<template>
    <div>
      <table>
        <tr v-for="i in users">
          <td v-if="i.role_id==='超级管理员'" style="color: red">{{i.name}}</td>
          <td v-if="i.role_id==='普通用户'" style="color: black">{{i.name}}</td>
          <td><img :src="'http://127.0.0.1:8000'+i.img" width="250" height="250" alt=""></td>
          <td>{{i.role_id}}</td>
          <td><router-link :to="{'name':'xiang',query:{'id':i.id}}">详情</router-link></td>
          <td><a href="" @click.prevent="del(i.id)">删除</a></td>
          <td><router-link :to="{'name':'update',query:{'id':i.id}}">修改</router-link></td>
        </tr>
      </table>
      <span v-for="num in pages">
        <!--<input type="button" :value="num" @click="good_list(num)">-->
        <input type="button" :value="num" @click="good_list(num)">
      </span>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "index",
      data:function () {
        return{
          users:""
        }
      },
      mounted() {
          axios({
            url:"http://127.0.0.1:8000/show_pa/",
            method:"post",
          }).then(res=>{
            this.users=res.data.message
            this.pages=res.data.list
          })
      },
      methods:{
          good_list(num){
            axios({
              url:"http://127.0.0.1:8000/show_pa/",
              method:"post",
              data:{
                'p':num
              }
            }).then(res=>{
              this.users=res.data.message
              this.pages=res.data.list
            })
          },
        del(id){
            axios({
              url:"http://127.0.0.1:8000/delete/",
              method:"post",
              data:{
                id:id
              }
            }).then(res=>{
              window.location.reload()
            })
        }
      }
    }
</script>

<style scoped>

</style>
